<template>
	<view>
		<view class="text_line"></view>	
	<view class="myreserve" v-for="(item,index) in listData" :key="index">
	<view style="display: flex;flex-direction: column;">
		<view style="margin-left: 15px;margin-top: 10px;">{{item.homestayName}}</view>
		<image :src="`http://192.168.2.218:8086/business/common2/download?name=${item.picture}`" mode="aspectFill" style="background-color: aqua;margin-top: 10px;"></image>
		</view>
		<view style="flex-direction: column;flex-grow: 1;">
			<view style="margin-left: 70%;font-size: 13px;width: 100%;" v-if="item.orderStatus===1 && item.orderType===10">待付款</view>
		    <view style="margin-left: 70%;font-size: 13px;width: 100%;" v-else-if="item.orderStatus===1 && item.orderType===11">已预定</view>
			<view style="margin-left: 60%;font-size: 13px;width: 100%;" v-else-if="item.orderType===30">等待商家确定</view>
			<view style="margin-left: 70%;font-size: 13px;width: 100%;" v-else>已完成</view>
		<view class="name">
			<text class="name1">{{item.goodsName}}</text>
	        <text class="price">￥{{item.goodsPrice}}</text>
		</view>
		<view class="detail">
			<text class="creat_time">{{item.createTime}}</text>
			<view v-if="item.goodsType===1">
		    <text class="sum">数量：×{{item.goodsNum}}</text>
			</view>
		</view>
		<view style="margin-left: 120px;margin-top: 30px;">共计:{{(((+item.goodsPrice) * (+item.goodsNum)).toFixed(2)-((+item.couponNum) * (+item.couponSubsidy)).toFixed(2)).toFixed(2)}}</view>
		<view class="button_choose">
			<view v-if="item.orderStatus===2">
		<button size="mini" type="default" 
			style="color:#ffffff;backgroundColor:#ffffff;color: black;margin-left: 15px;"  
			@click="refund(item.id)">退款</button>
	         
		<button v-if="item.score!=(-1)" size="mini" type="default"
			style="color:#ffffff;backgroundColor:#ffffff;color: black;margin-left: 5px;"  
			@click="score(item)" >评分</button>
			<button size="mini" type="default"
				style="color:#ffffff;backgroundColor:#ffffff;color: black;margin-left: 5px;"  
				@click="look_info(item.id)">查看详情</button>
				</view>
				
				<view v-else-if="item.orderStatus===1 && item.orderType===10">
					<button size="mini" type="default"
						style="color:#ffffff;backgroundColor:#ffffff;color: black;margin-left: 15px;"  
						>点击支付</button>
						<button size="mini" type="default"
							style="color:#ffffff;backgroundColor:#ffffff;color: black;margin-left: 10px;"  
							@click="look_info(item.id)">查看详情</button>
				</view>
				<view v-else>
					<button size="mini" type="default"
						style="color:#ffffff;backgroundColor:#ffffff;color: black;margin-left: 100px;"  
						@click="look_info(item.id)">查看详情</button>
				</view>
				
		</view>
		</view>
	</view>
    <view class="form-container" v-if="ScoreForm">
      <input type="text" v-model="Score.score" placeholder="分数" />
    <view style="display: flex;flex-direction: row;margin-top: 12px;">
     <button @click="SubmitScore">提交</button>
     <button @click="ScoreForm = false">取消</button>
	 </view>
    </view>
	</view>
</template>

<script>
	export default {
	
		props :{
			listData:{},
			
		},
		data() {
			return {
				detail:{
				},
				Text:'1111',
				ScoreForm:false,
				Score:{
					"score":'',
				}
		}
		},
		onLoad() {
			if(item.orderStatus===2)
			this.Text="已完成；"
		},
		methods: {
			look_info(OrderId){
				
				uni.navigateTo({
				      url: '/pages/order/detail?OrderId='+OrderId
				    });	
			},
			refund(OrderId){
				console.log(OrderId)
			},
			score(Order){
			
				uni.setStorageSync('OderMsg',Order);
				uni.navigateTo({
				      url: '/pages/order/order_score?OrderId='+Order.id
				    });	
			},
			SubmitScore(){
				
			}
		},
	}
	
</script>
<style>
	.form-container button{
		height: 50px;
	}

	.myreserve{
			display: flex;
			padding: 15px;
			box-shadow: 0 0 8rpx 6rpx rgba(143, 143, 143, 0.25);

	}
	.myreserve .name{
		display: flex;
		/* 竖直排布 */
		flex-direction: row;
		/* 均匀分布 */
		justify-content: space-evenly;
		
	}
	.myreserve image{
		width: 80px;
		height: 80px;
		margin-right: 20px;
	}
	.name1{
		font-size: 13px;
		font-weight: 500;
	}
	.price{
	    margin-left: 60px;
		font-size: 15px;
		font-weight: 900;
		color: red;
		

	}
	.reserve{
	    font-size: 15px;
		width: 30%;
		margin-top: 50px;
		margin-left: 30px;

	}
	.detail {
		margin-left: 20px;
		margin-top: 5px;
		display: flex;
		/* 竖直排布 */
		flex-direction: row;
	

		
	}
	.button_choose {
        margin-top: 20px;
		display: flex;
		/* 竖直排布 */
		flex-direction: row;
		/* 均匀分布 */
		margin-left: -15px;
		
	} 
	.creat_time{
		margin-top: 10px;
		font-size: 10px;
	    font-weight: 200;
		margin-left: 0px;
	  }
    .sum{
		margin-top: 20px;
		margin-left:10px;
		font-size: 10px;
		font-weight: 500;
	  }
	 .text_line{
	 
	 /*盒子下边距，这里用来指定下划线距离文字的高度*/
	 padding-bottom: 0px;
	 		
	 /*设定一个2px，实线*/
	 border-bottom: 1.3px solid #e3e3e3; 
	 }

</style>